<template>
	<view class="_p10">
		<view class="_flex _flex-space-x _flex-dis-200p _flex-start">
			<view>
				<n-com-select memo="请选择数据源" :dictList="dsList" v-model="dsId"></n-com-select>
			</view>
			<view>
				<n-com-select memo="请选择数据源" :dictList="tables" v-model="dataCode"></n-com-select>
			</view>
		</view>
		<div class="_wrapper-x" v-if="dataCode">
			<ListIndex :tableCode="dataCode"></ListIndex>
		</div>
	</view>
</template>

<script>
	import ToolAction from "@/tool/http/tool-action.js";
	import ToolHttpClient from "@/tool/http/ToolHttp";
	import ToolEharts from "@/tool/ToolEcharts.js";
	
	import ListIndex from "@/pages/common/index.vue";

	let apiDs = ToolAction.init("data_source");
	export default {
		components: { ListIndex },
		data() {
			return {
				dsId: undefined,
				dsList: [],
				dataList: [],
				dataCode: undefined
			}
		},
		computed: {
			tables() {
				return this.dataList.map(item => ({
					name: `${item.memo}(${item.name})`,
					val: item.name
				}))
			}
		},
		watch: {
			dsId(newValue) {
				console.log(newValue);
				this.$nextTick(() => this.initDataList());
			}
		},
		mounted() {
			this.initDataList();
			apiDs.dict().then(res => {
				this.dsList = [...res, {
					name: "默认",
					val: undefined
				}];
			});
		},
		methods: {
			initDataList() {
				ToolHttpClient.post(`/action/action-table-infos/*`, {
					_dsId: this.dsId
				}).then(res => {
					this.dataList = res;
				});
			}
		},
	}
</script>

<style>
</style>
